<!--
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2020-11-23 14:56:47
 * @LastEditors: sueRimn
 * @LastEditTime: 2020-11-23 15:33:37
-->
<template>
    <div>
        <div class="comment">
            <div
                class="commentItem"
                v-for="(item, index) in replyList"
                :key="index"
            >
                <div class="headerInfo">
                    <div class="Avatar">
                        <el-avatar size="medium" :src="item.avatar"></el-avatar>
                        <div class="AvatarName">
                            {{ item.users_name }}
                        </div>
                    </div>
                    <div
                        class="commentlike"
                        @click="DelReplyLike(item, index)"
                        :class="[item.is_like == 1 ? 'upActive' : '']"
                    >
                        <span class="iconfont icon-xihuan1"></span>
                        <span class="likeNum">{{ item.likenum }}</span>
                    </div>
                </div>
                <div class="commentContent">
                    <div>{{ item.reply_text }}</div>
                    <div class="commentState">
                        <div>{{ item.crate_time | getTime }}</div>
                        <div class="commentDel" @click="DelReply(item, index)">
                            删除
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="noMore" v-if="replyList.length == 0">
            -- 没有更多评论啦~ --
        </div>
        <div class="sendComment">
            <el-divider></el-divider>
            <el-input
                placeholder="参与评论~"
                class="input-with-select"
                v-model="addReplyInput"
            >
                <el-button type="primary" slot="append" @click="AddReply"
                    >发送</el-button
                >
            </el-input>
        </div>
    </div>
</template>

<script>
import { getFormatTime } from "@/utils/timeUtils";
import {
    getListsReply,
    saveAddReply,
    saveDelReplyLike,
    saveAddReplyLike,
    toDelReply
} from "@/api/personalHomepage/index";
export default {
    props: ["ArticleID", "articleReplyId"],
    filters: {
        //时间格式
        getTime(val) {
            if (val != "") {
                return getFormatTime(val * 1000);
            }
        }
    },
    watch: {
        articleReplyId: {
            handler(id) {
                this.ListsReply(id);
            },
            // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
            immediate: true
        }
    },
    data() {
        return {
            //评论
            addReplyInput: "", //评论内容
            replyList: []
        };
    },
    methods: {
        async ListsReply(id) {
            var query = {
                article_id: this.ArticleID,
                article_reply_id: id
            };
            var list = await getListsReply(query);
            if (list.code == 200) {
                this.replyList = list.data.data[0].answer;
            }
            console.log("子文章评论：", list);
        },
        //发表评论
        async AddReply() {
            if (this.addReplyInput.trim() == "") {
                return this.$message({
                    message: "评论内容不能为空",
                    type: "warning"
                });
            }
            var query = {
                text: this.addReplyInput,
                article_id: this.ArticleID,
                pid: this.articleReplyId
            };
            var list = await saveAddReply(query);
            if (list.code == 200) {
                this.addReplyInput = "";
                this.ListsReply(this.articleReplyId);
                this.$message({
                    type: "success",
                    customClass: "customClass",
                    message: "评论成功!"
                });
            }
            console.log("发表评论:", list);
        },
        //评论点赞
        async DelReplyLike(item, index) {
            var query = {
                article_id: this.ArticleID,
                article_reply_id: item.article_reply_id
            };
            var list;
            if (item.is_like == 1) {
                list = await saveDelReplyLike(query);
                if (list.code == 200) {
                    this.replyList[index].is_like = null;
                    this.replyList[index].likenum =
                        this.replyList[index].likenum - 1;
                }
            } else {
                list = await saveAddReplyLike(query);
                if (list.code == 200) {
                    this.replyList[index].is_like = 1;
                    this.replyList[index].likenum =
                        this.replyList[index].likenum + 1;
                }
            }
            console.log("评论点赞：", list);
        },
        //删除评论
        DelReply(item, index) {
            this.$confirm("此操作将永久删除该评论, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(async () => {
                    var query = {
                        article_reply_id: item.article_reply_id,
                        article_id: this.ArticleID
                    };
                    var list = await toDelReply(query);
                    if (list.code == 200) {
                        this.replyList.splice(index, 1);
                        this.articleForm.commentnum--;
                        this.$message({
                            type: "success",
                            customClass: "customClass",
                            message: "删除成功!"
                        });
                    }
                    console.log("删除评论:", list);
                })
                .catch(() => {});
        }
    }
};
</script>

<style scoped lang="scss">
.comment {
    width: 100%;
    margin-top: 30px;

    .commentItem {
        width: 100%;
        margin-bottom: 25px;

        .headerInfo {
            display: flex;
            justify-content: space-between;

            .Avatar {
                display: flex;
                align-items: center;

                .AvatarName {
                    margin-left: 8px;
                }
            }

            .commentlike {
                color: #8b8a8a;
                cursor: pointer;

                .likeNum {
                    margin-left: 5px;
                    margin-right: 10px;
                }
            }
        }

        .commentContent {
            margin-left: 35px;
            margin-top: 10px;

            .commentState {
                color: #8b8a8a;
                font-size: 14px;
                margin-top: 20px;
                display: flex;
                align-items: center;

                div {
                    margin-right: 20px;
                }

                .huiFu {
                    cursor: pointer;
                }

                .commentDel {
                    color: #f2546a;
                    cursor: pointer;
                }
            }
        }
    }
}

.noMore {
    color: #8b8a8a;
    width: 100%;
    text-align: center;
}

.upActive {
    color: #ff4e78 !important;
    border-color: #ff4e78 !important;
}
</style>
